<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <link rel="stylesheet" href="/css/cart.css">
  <script src="/libs/require.js" data-main="/js/cart.js"></script>
</head>
<body>
  
  <header></header>
  <table border="1">
    <thead>
      <tr>
        <th>全选&nbsp;&nbsp;<input type="checkbox" class="allBtn"></th>
        <th>商品id</th>
        <th>商品图片</th>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>选购数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody class="cart-body">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="5" ><button class="all">合计</button></td>
        <td colspan="3" class="total">0.00</td>
      </tr>
    </tfoot>
  </table>

  <footer></footer>
  <!-- 定义购物车中商品行的模板 -->
  <script type="text/html" id="cart-template">
    {{if cart.length === 0}}
      <tr>
        <td colspan="7">购物车为空，请<a href="/">选购商品</a></td>
      </tr>
    {{else}}
      {{each cart}}
      <tr data-id="{{$value.id}}">
        <td><input type="checkbox" name="checked" class="itemBtn"></td>
        <td>{{$value.id}}</td>
        <td><img src="{{$value.image}}" style="width: 64px; height: 64px;"></td>
        <td>{{$value.title}}</td>
        <td>{{$value.price}}元</td>
        <td>
          <!-- <button class="minus">-</button>
          <span class="amount">{{$value.num}}</span>
          <button class="plus">+</button> -->
            <div>
                <button class="minus">-</button>
                <span class="amount">{{$value.num}}</span>
                <button class="plus">+</button>
           </div>
        </td>
        <td class="sub">{{$value.price * $value.num}}</td>
        <td><button class="del">删除</button></td>
      </tr>
      {{/each}}
    {{/if}}
  </script>
</body>
</html>